<template>
    <div>
        <div class="search">
            <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
        </div>
        <div
            class="search-content"
            ref="search"
            v-show="keyword"
        >
            <ul>
                <li
                    v-for="item of list"
                    :key="item.id"
                    class="search-item border-bottom"
                    @click="handleCityClick(item.name)"
                >{{item.name}}</li>
                <li class="search-item border-bottom" v-show="hasNoData">
                    没有找到匹配数据
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

    import Bscroll from "better-scroll";
    import {mapMutations} from "vuex";

    export default {
        name: "Search",
        props: {
            cities: [Object,Array]
        },
        data (){
            return{
                keyword: '',
                list: [],
                timer: null,
            }
        },
        watch: {
            keyword(){
                if(this.timer){
                    clearTimeout(this.timer)
                }
                if(!this.keyword){
                    this.list = [];
                    return;
                }
                this.timer = setTimeout(() => {
                    const result = [];
                    for (let i in this.cities){
                        this.cities[i].forEach((value) =>{
                            if(value.spell.indexOf(this.keyword) > -1 ||
                            value.name.indexOf(this.keyword) > -1){
                                result.push(value)
                            }
                        })
                    }
                    this.list = result;
                },100)
            }
        },
        computed:{
            hasNoData(){
                return !this.list.length;
            }
        },
        mounted (){
            this.scroll = new Bscroll(this.$refs.search)
        },
        methods: {
            handleCityClick(city){
                this.changeCity(city);
                this.$router.push('/')
            },
            ...mapMutations(['changeCity'])
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~@/assets/vavibles.styl"
    .search
        background $bgColor
        padding 0 .1rem
        height .72rem
        .search-input
            width 100%
            text-align center
            border-radius .06rem
            padding 0 .1rem
            box-sizing border-box
            color #666
            height .62rem
            line-height .62rem
    .search-content
        position absolute
        overflow hidden
        z-index 1
        background #eee
        top 1.58rem
        right 0
        bottom 0
        left 0
        .search-item
            background #ffffff
            color #666
            padding-left .2rem
            line-height .62rem

</style>
